<template>
	<view class="login-page">

		<!-- #ifdef MP-WEIXIN -->
		<button>微信小程序平台</button>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<view class="login">
			<form class="form" @submit="h5Login">
				<view class="form-item">
					<label>手机号:</label>
					<input type="number" name="username" placeholder="请输入手机号">
				</view>
				<view class="form-item">
					<label>密码:</label>
					<input type="password" name="password" placeholder="请输入密码">
				</view>
				<view class="form-item flex">
					<view class="text">
						忘记密码
					</view>
					<view>|</view>
					<view class="text">
						短信登录
					</view>
				</view>
				<view class="form-item">
					<button form-type="submit">登录</button>
				</view>
			</form>
		</view>
		<!-- #endif -->

	</view>
</template>

<script>
	import userInfoData from '@/json/userinfo.json'
	export default {
		methods: {
			h5Login(e) {
				let user = e.detail.value;

				if (
					user.username == userInfoData.username &&
					user.password == userInfoData.password
				) {
					// uni.setStorage({
					// 	key:"userInfo",
					// 	data:{
					// 		userId:1,// 用户真实登录后 后端会给你userId
					// 		Tel:user.username
					// 	}
					// })
					uni.setStorageSync("userInfo", {
						userId: 1
					})
					uni.showToast({
						title: "登录成功",
						success() {
							uni.navigateBack()
						}
					})
					// 用户登录成功
				} else {
					// 用户登录失败
					uni.showToast({
						title: "登录失败",
						icon: "error"
					})
				}
			}
		}
	}
</script>

<style>
	.login-page {
		width: 100%;
		height: 100vh;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login {
		margin-top: 200rpx;
		width: 500rpx;
		height: 500rpx;
	}

	.form-item label {
		font-size: 30rpx;
		font-weight: bold;
		margin: 0 20rpx;
	}

	.form-item input {
		margin: 20rpx;
		border: 1px solid #ccc;
		height: 60rpx;
		font-size: 30rpx;
	}

	.form-item.flex {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		color: #ccc;
	}

	.form-item button {
		margin: 20rpx;
	}
</style>
